<template>
  <div class="allList_container">
    <!--导航栏-->
    <van-nav-bar title="全部订单" left-arrow @click-left="$router.go(-1)"/>

    <!-- 订单不存在-->

    <div class="OrderNUll" v-if="OrderList!==null&&OrderList.length===0">
      <div class="content">
        <p>您没有订单，快去首页购买吧</p>
        <van-button type="primary" to="/">主页</van-button>
      </div>
    </div>

    <!-- 订单存在-->
    <div class="order" v-else>

      <div class="orderItem" v-for="(item,index) in OrderList" :key="index">

        <div class="order-title">
          <van-icon name="shop-o" class="shop-icon"/>
          <span class="title-content">苦涩的青春</span>
          <van-icon name="arrow" class="shop-allow"/>
          <span class="tag">{{ item.label }}</span>
        </div>

        <van-card :num="item.count" :title="item.name" :thumb="item.imageUrl" class="orderInfo"
                  :desc="item.description" @click="clickDetail(item.orderId)"/>

        <div class="priceInfo">
          <span>总价：{{ item.salePrice | moneyFormat() }}元</span>
          <span class="real">实付款：{{ item.salePrice + item.freight | moneyFormat() }}元</span>
        </div>

        <div class="operate">
          <van-icon name="ellipsis" class="more" @click="clickMore(index)"/>
          <van-button type="default" size="small" class="operateBtn" round>默认按钮</van-button>
          <van-button type="default" size="small" class="operateBtn" round>默认按钮</van-button>
          <van-button type="default" size="small" class="operateBtn" round>默认按钮</van-button>
        </div>

        <transition name="van-fade">
          <div class="deleteContainer" v-show="item.show">
            <van-icon name="play" class="direction"/>
            <span @click="deleteOrder(item.orderId)">删除订单</span>
          </div>
        </transition>

      </div>

    </div>

  </div>
</template>

<script>
import filter from "../../filters/filter";

export default {
  name: "AllOrderList",

  inject: ["reload"],

  data() {
    return {
      OrderList: null
    }
  },

  created() {
    this.getAllList();
  },

  filters: {
    moneyFormat(money) {
      return filter.moneyFormat(money);
    }
  },

  methods: {
    // 获取相关数据
    async getAllList() {
      let res = await this.$axios.post(this.$api.getAllOrderList, {userId:this.$store.getters.user.userId });
      if (res.status === 200 && res.data.code === 200) {
        this.OrderList = this.filterArray(res.data.data);
      } else {
        this.$toast(res.data.message);
      }
    },

    // 显示详情
    clickDetail(orderId) {
      this.$router.push({path: "/orderDetail", query: {orderId}});
    },

    // 控制更多部分的显示与隐藏
    clickMore(index) {
      for (let i = 0; i < this.OrderList.length; i++) {
        if (i === index) {
          this.OrderList[index].show = !this.OrderList[index].show;
        } else {
          this.OrderList[i].show = false;
        }
      }
    },

    //删除数据
    async deleteOrder(orderId) {
      let res = await this.$axios.post(this.$api.deleteOrder, {orderId});
      if (res.status === 200 && res.data.code === 200) {
        this.$toast("删除成功");
        this.reload();
      } else {
        this.$toast(res.data.message);
      }
    },

    // 格式化数据
    filterArray(data) {
      let newData = data;
      if (data.length <= 0) {
        return newData = [];
      }
      for (let i = 0; i < newData.length; i++) {
        // 获取原来的数据
        let status = ["待支付", "待确认", "待发货", "已发货", "待收货", "已完成", "退款处理中", "退款完成", "拒绝退款"];
        newData[i].label = status[newData[i].status];
        newData[i].show = false;
      }
      return newData;
    }
  }
}
</script>

<style scoped lang="less">

.allList_container {
  padding-bottom: 2rem;

  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }

  .order {
    padding: .2rem .5rem;

    .orderItem {
      box-shadow: 0 0 10px #eee;
      border-radius: 1rem;
      padding-top: 5px;
      background-color: #ffffff;
      margin-bottom: .3rem;
      position: relative;

      .order-title {
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 14px;

        span {
          vertical-align: middle;
          font-size: 14px;
        }

        .shop-icon {
          vertical-align: middle;
          font-size: .9rem;
          margin-left: 7px;
          margin-right: 3px;
        }

        .shop-allow {
          margin-left: .2rem;
          vertical-align: middle;
        }

        .tag {
          float: right;
          margin-right: 1rem;
          color: #F98510;
          font-size: 12px;
        }
      }

      .orderInfo {
        background-color: #ffffff;
      }

      .priceInfo {
        padding-top: .5rem;
        text-align: right;
        padding-right: 1rem;
        padding-bottom: .5rem;
        font-size: 14px;

        .real {
          margin-left: 1rem;
          color: red;
        }
      }

      .operate {
        text-align: right;
        padding-bottom: .8rem;
        padding-right: 1rem;
        position: relative;

        .operateBtn {
          margin-left: .5rem;
        }

        .more {
          float: left;
          font-size: 1.2rem;
          margin-left: 1.5rem;
          transform: translateY(40%);
        }

      }

      .deleteContainer {
        position: absolute;
        z-index: 99;
        top: 103%;
        left: 0;
        background-color: #fff;
        padding: .6rem;
        border-radius: .6rem;
        box-shadow: 0 0 10px #ccc;

        .direction {
          color: #fff;
          padding: 0;
          margin: 0;
          position: absolute;
          top: -11px;
          left: 30%;
          transform: rotateZ(270deg);
        }
      }
    }

  }

  .content {
    margin-top: 50%;
    text-align: center;
  }

}
</style>